PWA (Progressive Web App) এমন একটি অ্যাপ্লিকেশন যা মোবাইল অ্যাপ্লিকেশন এবং ওয়েবসাইটের বৈশিষ্ট্যগুলো একত্রিত করে। এটি ওয়েব ব্রাউজার দ্বারা ব্যবহৃত হয়, তবে মোবাইল অ্যাপের মতো কাজ করে, যেমন অফলাইন অ্যাক্সেস, পুশ নোটিফিকেশন, এবং হোম স্ক্রীনে অ্যাড করা। Cordova মূলত মোবাইল অ্যাপ ডেভেলপমেন্টের জন্য তৈরি হলেও, এর মাধ্যমে PWA তৈরি করাও সম্ভব।
এখানে দেখানো হবে কীভাবে Cordova ব্যবহার করে PWA তৈরি করা যায়।
১. Cordova PWA তৈরি করার জন্য প্রস্তুতি
১.১. Cordova ইনস্টল করা
প্রথমে, আপনার সিস্টেমে Cordova ইনস্টল থাকতে হবে। যদি এটি ইনস্টল না করা থাকে, তাহলে নিচের কমান্ড দিয়ে ইনস্টল করুন:
npm install -g cordova১.২. একটি নতুন Cordova প্রোজেক্ট তৈরি করা
Cordova প্রোজেক্ট তৈরি করতে নিচের কমান্ড ব্যবহার করুন:
cordova create myPWA
cd myPWAএই কমান্ডটি একটি নতুন প্রোজেক্ট তৈরি করবে এবং "myPWA" নামে একটি ফোল্ডারে নিয়ে যাবে।
২. PWA-র জন্য প্রয়োজনীয় ফাইল যোগ করা
২.১. manifest.json তৈরি করা
PWA অ্যাপ্লিকেশনের জন্য একটি manifest file প্রয়োজন, যা অ্যাপের আইকন, নাম, রং এবং হোম স্ক্রীনে অ্যাড করার মতো বৈশিষ্ট্য সংজ্ঞায়িত করে। manifest.json ফাইলটি www/ ফোল্ডারে তৈরি করুন।
www/manifest.json:
{
"name": "My Progressive Web App",
"short_name": "MyPWA",
"description": "A simple Cordova PWA example",
"start_url": ".",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}এটি অ্যাপের মেটা ডেটা প্রদান করবে এবং PWA অ্যাপ্লিকেশনটির চেহারা এবং কার্যকারিতা সেট করবে।
২.২. Service Worker ফাইল যোগ করা
PWA অ্যাপের জন্য একটি service worker ফাইল প্রয়োজন, যা অ্যাপকে অফলাইন মোডে পরিচালনা করতে এবং পুশ নোটিফিকেশনগুলি পরিচালনা করতে সাহায্য করবে। Cordova অ্যাপে service worker যোগ করতে হলে, www/sw.js ফাইলটি তৈরি করুন।
www/sw.js:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-pwa-cache').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/scripts.js',
'/manifest.json',
'/icons/icon-192x192.png',
'/icons/icon-512x512.png'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
return cachedResponse || fetch(event.request);
})
);
});এই ফাইলটি অ্যাপের ক্যাশিং এবং অফলাইন সাপোর্ট পরিচালনা করবে।
২.৩. index.html ফাইল আপডেট করা
আপনার index.html ফাইলে manifest.json এবং service worker রেজিস্টার করতে হবে।
www/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<title>My PWA</title>
</head>
<body>
<h1>Welcome to My PWA</h1>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js').then(function(registration) {
console.log('Service Worker registered with scope: ', registration.scope);
}).catch(function(error) {
console.log('Service Worker registration failed: ', error);
});
}
</script>
</body>
</html>এটি manifest.json ফাইলটি আপনার অ্যাপের সাথে যুক্ত করবে এবং service worker ফাইল রেজিস্টার করবে।
৩. PWA ফিচার সক্রিয় করা
৩.১. Cordova WebView প্লাগইন ইনস্টল করা
Cordova দিয়ে PWA তৈরি করার জন্য WebView প্লাগইন ইনস্টল করা হতে পারে। নিচের কমান্ডটি ব্যবহার করুন:
cordova plugin add cordova-plugin-advanced-http৩.২. এপিকে পুশ নোটিফিকেশন সেটআপ
PWA অ্যাপে পুশ নোটিফিকেশন ব্যবহার করতে, আপনাকে Firebase বা অন্যান্য পুশ নোটিফিকেশন সেবা ব্যবহার করতে হবে। Firebase Cloud Messaging (FCM) এর মাধ্যমে পুশ নোটিফিকেশন সেটআপ করতে পারেন।
৪. PWA রান করা
PWA অ্যাপ রান করতে Cordova সিমুলেটর বা ব্রাউজার ব্যবহার করতে পারেন। তবে, মোবাইল অ্যাপে PWA রান করতে নিচের কমান্ড ব্যবহার করতে পারেন:
cordova platform add browser
cordova run browserএটি আপনার অ্যাপ ব্রাউজারে চালু করবে, যেখানে আপনি PWA বৈশিষ্ট্য দেখতে পারবেন।
৫. PWA তে অ্যাপ স্টোর ফিচার যোগ করা
PWA এর মূল সুবিধাগুলির মধ্যে একটি হল, এটি অফলাইন মোডে কাজ করতে সক্ষম। তাই, যখন অ্যাপটি প্রথমে ব্যবহারকারী কর্তৃক ইনস্টল করা হয়, তখন এটি ব্যবহারকারীর ডিভাইসে চলে আসে এবং হোম স্ক্রীনে একটি আইকন হিসেবে প্রদর্শিত হয়।
সারাংশ
Cordova ব্যবহার করে PWA তৈরি করতে, আপনাকে কিছু বিশেষ ফাইল যোগ করতে হবে যেমন manifest.json (অ্যাপের মেটা ডেটা) এবং service worker (অফলাইন সাপোর্ট এবং ক্যাশিং)। Cordova প্লাগইন ব্যবহার করতে হতে পারে এবং পুশ নোটিফিকেশন ব্যবহার করতে Firebase বা অন্য কোন পুশ সেবা ব্যবহার করা যেতে পারে। Cordova ব্যবহার করে একটি ওয়েব অ্যাপ্লিকেশনকে PWA হিসেবে রূপান্তর করা অনেক সহজ, এবং এটি অফলাইন মোডে কাজ করার ক্ষমতা প্রদান করে, যা মোবাইল অ্যাপের মতো অভিজ্ঞতা প্রদান করে।
Read more
